<template>
  <div class="app">
    <van-nav-bar title="我的" placeholder fixed />

    <van-cell-group>
      <van-cell :center="true" is-link to="userInfo">
        <template #title>
          <van-row>
            <van-col span="6">
              <van-image radius="5px" width="70px" :src="userInfo.avatar" />
            </van-col>

            <van-col span="18">
              <van-button round type="primary" size="small" @click="checkIn($event)" class="btn">
                签到
              </van-button>
              <div class="userInfo">
                <div class="nickName">
                  <span>{{ userInfo.nickName }}</span>
                </div>

                <div class="userName">
                  <span>用户名：</span><span class="userName">{{ userInfo.userName }}</span>
                </div>
              </div>
            </van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="我的订单" is-link to="myorder" />
      <van-cell title="联系客服" is-link to="#" />
      <van-cell title="关于我们" is-link to="#" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="退出登录" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { getUserInfoReq, userCheckInReq } from '@/api/user'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let userInfo = ref({})
// 获取用户信息
function getUserInfo() {
  getUserInfoReq().then((res) => {
    // console.log(res.data.data)
    userInfo.value = res.data.data
  })
}
getUserInfo()
// 签到
function checkIn(event) {
  event.stopPropagation() // 阻止事件冒泡
  // console.log('签到')
  userCheckInReq().then((res) => {
    // console.log('签过：', res.data)
    if (res.data.code === 1) {
      // eslint-disable-next-line no-undef
      showSuccessToast(res.data.msg)
    } else {
      // eslint-disable-next-line no-undef
      showFailToast(res.data.msg)
    }
  })
}
// 退出登录
let router = useRouter()
function logout() {
  // 清除本地存储
  localStorage.removeItem('mall-token')
  // 跳转到首页
  router.push('/')
}
</script>

<style scoped>
.btn {
  float: right;
}
.userInfo {
  margin-top: 20px;
}
</style>
